<template>
  <div class="block">
    <el-timeline>
      <el-timeline-item
        v-for="(item,index ) in flowRecordList"
        :key="index"
        :icon="setIcon(item.endTime)"
        :color="setColor(item.endTime)"
      >
        <p style="font-weight: 700">{{item.taskName}}</p>
        <el-card :body-style="{ padding: '10px' }">
          <el-descriptions class="margin-top" :column="1" size="small" border>
            <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
              <template slot="label"><i class="el-icon-user"></i>实际办理</template>
              {{item.assigneeName}}
              <el-tag type="info" size="mini">{{item.assigneeDeptName}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item v-if="item.candidate" label-class-name="my-label">
              <template slot="label"><i class="el-icon-user"></i>候选办理</template>
              {{item.candidate}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label">
              <template slot="label"><i class="el-icon-date"></i>接收时间</template>
              {{item.createTime}}
            </el-descriptions-item>
            <el-descriptions-item v-if="item.endTime" label-class-name="my-label">
              <template slot="label"><i class="el-icon-date"></i>处理时间</template>
              {{item.endTime}}
            </el-descriptions-item>
            <el-descriptions-item v-if="item.duration"  label-class-name="my-label">
              <template slot="label"><i class="el-icon-time"></i>耗时</template>
              {{item.duration}}
            </el-descriptions-item>
            <!-- <el-descriptions-item v-if="item.comment" label-class-name="my-label">
              <template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
              {{item.comment}}
            </el-descriptions-item> -->
          </el-descriptions>
          <p  v-if="item.comment">
            <el-tag type="success">  {{item.comment}}</el-tag>
            <!-- <el-tag type="warning" v-if="item.comment.type === '2'">  {{item.comment.comment}}</el-tag>
            <el-tag type="danger" v-if="item.comment.type === '3'">  {{item.comment.comment}}</el-tag> -->
          </p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
export default {
  name:'TaskRecord',
  props: {
    flowRecordList: {
      type: Array,
      default: () => []
    }
  },
  data(){
    return {

    }
  },
  mounted(){
  },
  methods:{
    setIcon(val) {
      if (val) {
        return "el-icon-check";
      } else {
        return "el-icon-time";
      }
    },
    setColor(val) {
      if (val) {
        return "#2bc418";
      } else {
        return "#b3bdbb";
      }
    },
  }
}
</script>
